<template>
	<view>
		<v-top-header />
		<!-- {{vuex_ip_list}} -->
		<u-cell-group v-if="vuex_ip_list.length > 0">
			<u-cell-item v-for="(item,index) in vuex_ip_list" :key="item.ip" :arrow="false"
				@click="setDefaultIp(index)">
				<view slot="title" class="cell-item">
					<u-icon name="close-circle" size="40" @click="removeIp(index)"></u-icon>
					<view class="cell-item-title">
						<view>IP地址:{{item.ip}}</view>
						<view>服务端口:{{item.server_port}}/设备端口:{{item.device_port}}</view>
					</view>
				</view>
				<u-icon slot="right-icon" name="checkbox-mark" v-show="item.ip == vuex_ip_current.ip"></u-icon>
			</u-cell-item>
		</u-cell-group>
		<u-empty style="margin-top:60px;" v-else></u-empty>
		<u-gap bg-color="#fafafa"></u-gap>
		<view class="ip-title">服务器ip配置</view>
		<view class="ip-block">
			<u-input v-model="ip[0]" placeholder="" border></u-input>
			<view class="dot-block">.</view>
			<u-input v-model="ip[1]" :custom-style="inputCustomStyle" placeholder="" type="number" :maxlength="3"
				border></u-input>
			<view class="dot-block">.</view>
			<u-input v-model="ip[2]" :custom-style="inputCustomStyle" placeholder="" type="number" :maxlength="3"
				border></u-input>
			<view class="dot-block">.</view>
			<u-input v-model="ip[3]" :custom-style="inputCustomStyle" placeholder="" type="number" :maxlength="3"
				border></u-input>
		</view>
		<view class="ip-title">服务端口配置</view>
		<view class="ip-block">
			<u-input type="number" v-model="server_port" inputAlign="center" placeholder="请输入服务端口" clearable
				border></u-input>
		</view>
		<view class="ip-title">设备端口配置</view>
		<view class="ip-block">
			<u-input type="number" v-model="device_port" inputAlign="center" placeholder="请输入设备端口" clearable
				border></u-input>
		</view>
		<view class="button-block">
			<u-button class="submit" size="medium" type="primary" @click="submit"
				:disabled="ip.length < 4 || server_port == null || server_port == '' || device_port == null || device_port == ''">
				<text>保存IP端口</text>
			</u-button>
			<u-button class="back" size="medium" type="info" @click="back">
				<text>返回</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import vTopHeader from '@/components/v-top-header.vue'
	export default {
		components: {
			vTopHeader
		},
		data() {
			return {
				inputCustomStyle: {
					width: '10px'
				},
				ip: [],
				server_port: null,
				device_port: null
			}
		},
		methods: {
			submit() {
				let checkFailed = false
				for (var i = 0; i < this.ip.length; i++) {
					if (this.$u.test.range(this.ip[i], [0, 255])) {
						// do nothing.
					} else {
						checkFailed = true
						this.$u.toast('ip地址不正确，请重新输入')
						return
					}

					if (this.server_port) {
						// do nothing.
					} else {
						checkFailed = true
						this.$u.toast('服务端口不正确，请重新输入')
						return
					}

					if (this.device_port) {
						// do nothing.
					} else {
						checkFailed = true
						this.$u.toast('设备端口不正确，请重新输入')
						return
					}
				}
				if (checkFailed === false) {
					let current_ip = this.ip[0] + '.' + this.ip[1] + '.' + this.ip[2] + '.' + this.ip[3]
					let ip_list = this.vuex_ip_list
					let current_cnf = {
						ip: current_ip,
						server_port: this.server_port,
						device_port: this.device_port
					}
					ip_list.push(current_cnf)
					this.$u.vuex("vuex_ip_list", ip_list)
					this.$u.vuex("vuex_ip_current", current_cnf)
					this.ip = []
					this.server_port = null
					this.device_port = null
				}
			},
			back() {
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
			setDefaultIp(index) {
				if (this.vuex_ip_list.length == 0) {
					this.$u.vuex('vuex_ip_current', {
						ip: null,
						server_port: null,
						device_port: null
					})
					return
				}
				console.log('===========================', this.vuex_ip_list)
				this.$u.vuex("vuex_ip_current", this.vuex_ip_list[index])
			},
			removeIp(index) {
				let ip_list = this.vuex_ip_list
				this.$u.vuex("vuex_ip_list", ip_list.filter((item, idx) => idx != index))

				let {
					ip,
					server_port,
					device_port
				} = ip_list[index]

				if (this.vuex_ip_current.ip == ip &&
					this.vuex_ip_current.server_port == server_port &&
					this.vuex_ip_current.device_port == device_port) {
					this.setDefaultIp(0)
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.cell-item {
		display: flex;

		.cell-item-title {
			margin-left: 10upx;
		}
	}

	.ip-title {
		font-size: 30upx;
		text-align: center;
		margin-top: 40upx;
	}

	.ip-block {
		margin-top: 40rpx;
		display: flex;
		align-items: flex-end;
		padding: 0 40rpx;

		.dot-block {
			width: 40upx;
			text-align: center;
		}
	}

	.button-block {
		padding: 0 40upx;

		.submit {
			width: 100%;
			height: 80upx;
			margin-top: 80upx;
			font-size: 32upx;
			background-color: #000;
		}

		.back {
			width: 100%;
			height: 80upx;
			margin-top: 40upx;
			font-size: 32upx;
		}
	}
</style>